<template>
  <div id="start-exam">
    <div class="jx-content exam-top">
      <div class="exam-top-content">
        <div class="exam-title">单选题</div>
        <div class="exam-rightbox">
          <div>剩余时间：80分20秒</div>
          <div class="question-tab">
            <el-popover class="question-popover" placement="top-start" title="" width="" trigger="click">
              <el-tabs v-model="tabActiveName" @tab-click="tabHandleClick">
                <el-tab-pane name="first">
                  <span slot="label">
                    <el-badge :value="12" class="item">单选题</el-badge>
                  </span>
                  <ul class="question-tab-item clearfix">
                    <li>1</li>
                    <li class="active">1</li>
                    <li>1</li>
                    <li class="active">1</li>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                  </ul>
                </el-tab-pane>
                <el-tab-pane name="second">
                  <span slot="label">
                    <el-badge :value="12" class="item">判断题</el-badge>
                  </span>
                  判断题
                </el-tab-pane>
                <el-tab-pane name="third">
                  <span slot="label">
                    <el-badge :value="12" class="item">填空题</el-badge>
                  </span>
                  填空题
                </el-tab-pane>
                <el-tab-pane name="fourth">
                  <span slot="label">
                    <el-badge :value="12" class="item">简答题</el-badge>
                  </span>
                  简答题
                </el-tab-pane>
              </el-tabs>
              <div class="button-style" slot="reference">答题情况</div>
            </el-popover>
          </div>
          <div class="button-style">交卷</div>
        </div>
      </div>
    </div>
    <div class="exam-content">
      <div class="answer-title">
        <span>2、关于媒体文件存储优点说法正确的是 ？</span>
        <span class="c-blue">5分</span>
        <span class="fr c-blue">1/50</span>
      </div>
      <el-radio-group v-model="radio">
        <el-radio v-for="(item,index) in chose" :key="index" :label="item" class="jx-content">
          <div class="">
            <div class="question-item">
              <span class="question-chose">{{ item }}</span>
              <span class="question-text">
                爬虫运行得更快,耗费的流量更少,因为只要链接,不需要下载文件。
              </span>
            </div>
          </div>
        </el-radio>
      </el-radio-group>
      <div class="btn-group question-change">
        <div class="button-style">上一题</div>
        <div class="button-style">下一题</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tabActiveName: "first",
      radio: "",
      chose: ["A", "B", "C", "D"]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {},
    tabHandleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
#start-exam {
  .exam-top {
    width: 100%;
    padding: 0;
    position: fixed;
    top: 0;
    z-index: 1;
    .exam-top-content {
      width: $width;
      margin: 0 auto;
      padding: 0 40px;
      line-height: 80px;
      display: flex;
      justify-content: space-between;
      .exam-title {
        border-bottom: 2px solid $blue;
        color: $blue;
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
      }
      .exam-rightbox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        > div {
          margin-left: 10px;
        }
        .question-tab {
        }
      }
    }
  }
  .exam-content {
    width: 1200px;
    margin: 96px auto 0;
    .answer-title {
      line-height: 82px;
      font-size: 16px;
      padding: 0 40px;
      font-weight: bold;
      .c-blue{
        margin:0 0 0 10px;
        font-weight: normal;
      }
    }
    .question-item {
      margin-left: 42px;
      display: flex;
      .question-chose {
        &:after {
          content: "：";
        }
      }
      .question-item {
        flex: 1;
      }
    }
    .el-radio-group {
      display: block;
      label.el-radio {
        display: block;
        margin: 0 0 30px 0;
        padding: 0 40px;
        white-space: inherit;
        position: relative;
        .el-radio__inner {
          position: absolute;
          top: 22px;
          left: 0px;
        }
      }
    }
  }
}
.question-change{
  text-align: center;
  margin:50px 0 0 0;
  .button-style{
    width:280px;
    height:49px;
    line-height: 49px;
    border-radius: 49px;
    font-size: 16px;
    margin:0 10px;
  }
}
//悬浮框内容
.el-popper {
  width: 440px;
  box-sizing: border-box;
  padding: 0 16px 20px;
  position: relative;
  .el-badge__content {
    top: 14px;
  }
  .el-tabs__nav {
    padding: 0 20px;
  }
  .el-tabs__active-bar {
    left: 10px;
    padding: 0 10px;
    width: 42px;
    background-color: $blue;
  }
  .el-tabs__item {
    height: 46px;
    line-height: 46px;
  }
  .el-tabs__item:hover,
  .el-tabs__item.is-active {
    color: $blue;
  }
  .question-tab-item {
    padding: 20px 0 0 40px;
    li {
      position: relative;
      width: 22px;
      height: 23px;
      line-height: 23px;
      margin: 0 20px 20px 0;
      text-align: center;
      float: left;
      border: 1px solid #8e8e8e;
      color: #8e8e8e;
    }
    li.active {
      border-color: $blue;
      color: $blue;
      &:after {
        position: absolute;
        content: "\e614";
        bottom: -7px;
        font-family: "iconfont";
        color: #3fdb9b;
        background: #fff;
        line-height: 14px;
      }
    }
  }
}
</style>
